<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item label="">
        <el-input clearable placeholder="名称" v-model="filterData.name" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="search" />
        <el-button type="primary" @click="editFormVisible = true">
          新增字典
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        height="100%"
        :columns="tableDataColumns"
        v-loading="loading"
        :data="tableData"
        @row-click="rowClick"
      >
        <template #state="{ row }">
          {{ row.state == 1 ? "启用" : "禁用" }}
        </template>
        <template #edit="{ row }">
          <el-button
            size="small"
            :icon="Edit"
            plain
            type="warning"
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            :icon="Delete"
            plain
            type="danger"
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="total"
      @page-no-change="pageNoChange"
      @page-size-change="pageSizeChange"
    />
    <DictEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      type="1"
      @submit="getTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { deleteDict, pageSysDict, selectDict } from "@/api/system";
import Page from "@/components/pageTable/Page.vue";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import DictEditForm from "@/views/systemManage/dictionary/components/DictEditForm.vue";
import { bus } from "@/util";
import { usePage } from "@/hooks/usePage.ts";

let rowData: any;
const editFormVisible = ref<boolean>(false);
let filterData = ref({ name: "", code: "" });

const tableDataColumns = [
  { prop: "state", label: "状态", width: 80, template: true },
  { prop: "name", label: "字典名称", width: 120 },
  { prop: "code", label: "字典编码", width: 120 },
  { prop: "sort", label: "排序", width: 80 },
  { prop: "remark", label: "字典描述", width: 200 },
  { prop: "edit", label: "操作", width: 180, template: true, fixed: "right" },
];

const {
  loading,
  tableData,
  pageData,
  total,
  search,
  pageNoChange,
  pageSizeChange,
} = usePage(pageSysDict, filterData);

function rowClick(row: any) {
  bus.emit("searchDictValue", row?.id);
}

async function getTableData() {
  await search();
  bus.emit("searchDictValue", null);
}

async function edit(row: any) {
  const { data, success } = await selectDict(row?.id);
  if (!success) {
    return;
  }
  rowData = reactive(data);
  editFormVisible.value = true;
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { success, msg } = await deleteDict(row?.id);
    if (!success) {
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await getTableData();
  });
}

onMounted(async () => {
  await getTableData();
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
